<template>
  <section class='f-phone-active-flow'>
    <div v-html="form.openProcess"></div>
    <p v-if="!form.openProcess" class="f-center f-mt-30">暂无开卡流程</p>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()
    const router = useRouter()

    const route = useRoute();

    const state = reactive({
      form: {},
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '开卡流程',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });
      if (route.query.goodsId) {
        getGuideInfo(1, route.query.goodsId)
      }
      if (route.query.iccid) {
        getGuideInfo(2, route.query.iccid)
      }
      if (route.query.phone) {
        getGuideInfo(3, route.query.phone)
      }
    })

    const getGuideInfo = (type, id) => {
      let json = {
        "goodsId": type == 1 ? id : "",
        "iccid": type == 2 ? id : "",
        "phone": type == 3 ? id : "",
      }
      api.guideInfo(json).then(res => {
        state.form = res.data
      })
    }

    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang='scss'>
.f-phone-active-flow {
  img {
    max-width: 100% !important;
  }
}
</style>